<template>
  <el-dialog class="groupManage-open" width="60%" :visible.sync="visible" @close="closeHandle" :close-on-click-modal="false" :modal="false" :close-on-press-escape="false">
    <el-form ref="dateForm" :inline="true" label-width="80px" :model="dateForm">
      <el-form-item label="分类名称" prop="classfyName">
        <el-input v-model="dateForm.classfyName" clearable placeholder="请输入分类名称" style="width: 260px;"></el-input>
      </el-form-item>
      <el-form-item label="所属组合" prop="compositionName">
        <el-input v-model="dateForm.compositionName" clearable placeholder="请输入所属组合" style="width: 260px;"></el-input>
      </el-form-item>
      <el-form-item style="margin-left: 20px">
        <el-button class="bg-green" @click="getList">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="list"
      border fit
      size="mini"
      @row-click="submitHandle"
      :header-cell-style="{background:'#dcedff',color:'#32639d'}"
      style="width: 100%;"
    >
      <el-table-column type="index" label="序号" align="center" width="60" fixed></el-table-column>
      <el-table-column prop="classfyName" label="分类名称" min-width="130" fixed show-overflow-tooltip align="center">
        <template slot-scope="{row}">
          <span v-if="row.hasNetWorth" style="margin-left: 10px;cursor: pointer;color: #1890ff;" @click.stop="groupDeltailHandle(row.classifyId)">{{ row.classfyName }}</span>
          <span v-else style="margin-left: 10px;cursor: pointer;color: #666;" @click.stop="$message('该分类净值不存在，无法查看详情')">{{ row.classfyName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="compositionName" label="所属组合" min-width="130" fixed show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="initMoney" label="投资金额(万元)" width="130" align="center"></el-table-column>
      <el-table-column prop="sinceCreatedIncomRate" label="收益率" min-width="120" show-overflow-tooltip align="center">
        <template slot-scope="{row}">
          <span v-if="row.sinceCreatedIncomRate" 
          :class="row.sinceCreatedIncomRate>=0?'positiveFc':'negativeFc'">{{ row.sinceCreatedIncomRate }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="sinceOneYearIncomRate" label="近1年收益率" min-width="120" show-overflow-tooltip align="center">
        <template slot-scope="{row}">
          <span v-if="row.sinceOneYearIncomRate" 
          :class="row.sinceOneYearIncomRate>=0?'positiveFc':'negativeFc'">{{ row.sinceOneYearIncomRate }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="sinceCreatedVolatility" label="波动率" min-width="120" show-overflow-tooltip align="center">
        <template slot-scope="{row}">
          <span v-if="row.sinceCreatedVolatility">{{ row.sinceCreatedVolatility }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="sinceOneYearVolatility" label="近1年波动率" min-width="120" show-overflow-tooltip align="center">
        <template slot-scope="{row}">
          <span v-if="row.sinceOneYearVolatility">{{ row.sinceOneYearVolatility }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
       <el-table-column prop="sinceCreatedSharpeRate" label="夏普率" min-width="120" show-overflow-tooltip align="center">
        <template slot-scope="{row}">
          <span v-if="row.sinceCreatedSharpeRate">{{ row.sinceCreatedSharpeRate }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="sinceOneYearSharpeRate" label="近1年夏普率" min-width="120" show-overflow-tooltip align="center">
        <template slot-scope="{row}">
          <span v-if="row.sinceOneYearSharpeRate">{{ row.sinceOneYearSharpeRate }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="sinceCreatedMaxPullBack" label="最大回撤" min-width="120" show-overflow-tooltip align="center">
        <template slot-scope="{row}">
          <span v-if="row.sinceCreatedMaxPullBack">{{ row.sinceCreatedMaxPullBack }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="sinceOneYearMaxPullBack" label="近1年最大回撤" min-width="120" show-overflow-tooltip align="center">
        <template slot-scope="{row}">
          <span v-if="row.sinceOneYearMaxPullBack">{{ row.sinceOneYearMaxPullBack }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="createdTime" label="创建日期" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createdTime | parseTime }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageCurrent" :limit.sync="listQuery.limit" @pagination="getList" />

  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
import { findStrategyClassifyByPage } from '@/api/groupManage'
import { rmoney } from '@/utils'

export default {
  name: 'GroupManage',
  components: { Pagination },
  props: {
    isOpen: {
      type: Boolean,
      defaultL: false
    }
  },
  data() {
    return {
      visible: false,
      listLoading: false, 
      dateForm: {
        classfyName: '',
        compositionName: ''
      },
      total: 0,
      list: [],
      listQuery: {
        pageCurrent: 1,
        limit: 10
      },
      rmoney: Function
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  created() {
    this.dateForm.compositionId = this.$route.query.compositionId
    this.dateForm.compositionName = this.$route.query.compositionName
    this.rmoney = rmoney
    this.getList()
  },
  methods: {
    init() {
      this.visible = true
    },
    groupDeltailHandle(id) {
      this.$router.push({
        path: `/strategyComb/groupManage/netWorthAnalysis/${id}`
      })
    },
    submitHandle(row) {
      this.visible = false
      this.$emit('closeOpen', row)
    },
    closeHandle() {
      this.visible = false
    },
    resetForm() {
      this.$refs.dateForm.resetFields()
      this.dateForm = {
        classfyName: '',
        compositionName: ''
      }
      this.getList()
    },
    getList() {
      this.listLoading = true
      findStrategyClassifyByPage({
        ...this.dateForm,
        ...this.listQuery,
        userId: this.userId
      }).then(res => {
        this.listLoading = false
        this.list = res.body.list
        this.total = res.body.total
      })
    }
  }
}
</script> 


